<template>
  <div>
    <!--  -->
    <el-col :span="21">
      <div class="grid-content bg-purple-dark">
        <el-input v-model="search" placeholder="请输入要搜索的门诊科目名称" style="width:240px" suffix-icon="el-icon-search"></el-input>
        <el-button @click="kemuSearch">搜索</el-button>
      </div>
    </el-col>

    <!-- 添加按钮 -->
    <el-button
      size="mini"
      type="primary"
      @click="
        dialogFormVisible1 = true;
        add();
      "
    >
      添加
    </el-button>
    <!-- 门诊科目表 -->
    <el-table :data="tableData" style="width: 100%;margin:auto;line-height:20px;marginTop: 20px;">
      <el-table-column prop="subjectNo" label="门诊科目代号" align="center"></el-table-column>
      <el-table-column prop="subjectName" label="门诊科目名称" align="center"></el-table-column>
      <el-table-column prop="registerMoney" label="挂号费" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination layout="prev, pager, next" @current-change="changePage" :page-size="pagesize" :pageCount="maxPage" :total="count"></el-pagination>
    </div>

    <!-- 添加弹框 -->
    <el-dialog title="添加门诊科目" :visible.sync="dialogFormVisible1" width="30%" :append-to-body="true">
      <el-form :model="form1" ref="form1">
        <el-form-item label="门诊科目代号" prop="subjectNo" :label-width="formLabelWidth">
          <el-input v-model="form1.subjectNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="门诊科目名称" prop="subjectName" :label-width="formLabelWidth">
          <el-input v-model="form1.subjectName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="挂号费" prop="registerMoney" :label-width="formLabelWidth">
          <el-input v-model="form1.registerMoney" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible1 = false;
            addqued();
          "
        >
          确 定
        </el-button>
      </div>
    </el-dialog>

    <!-- 修改弹框 -->
    <el-dialog title="修改门诊科目" :visible.sync="dialogFormVisible2" width="30%" :append-to-body="true">
      <el-form :model="form2">
        <el-form-item label="门诊科目代号" :label-width="formLabelWidth">
          <el-input v-model="form2.subjectNo" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="门诊科目名称" :label-width="formLabelWidth">
          <el-input v-model="form2.subjectName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="挂号费" :label-width="formLabelWidth">
          <el-input v-model="form2.registerMoney" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible2 = false;
            editqued();
          "
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
// import { URL } from "../../../../utils/fanapi";
// import { delFn } from "../../../../utils/delfan";
export default {
  name: '',
  components: {},
  data() {
    var validateName = (rule, value, callback) => {
      //判断是否符合条件，调用callback回调
      if (value === true) {
        callback(new Error('名称已经存在'));
      } else {
        callback();
      }
    };
    return {
      search: '',
      tableData: [],
      pagesize: 3,
      nowpage: 1,
      count: 0,
      //添加
      dialogFormVisible1: false,
      form1: {
        subjectNo: '',
        subjectName: '',
        registerMoney: '',
      },
      rule: {
        subjectName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 1, max: 50, message: '最大长度为50个字符', trigger: 'blur' },
          //添加正则校验
          {
            pattern: /^[a-zA-Z0-9]+[a-zA-Z0-9._-]*$/,
            message: '名称不符合规范',
          },
          //添加方法校验
          { validator: validateName, trigger: 'blur' },
        ],
      },
      formLabelWidth: '120px',
      // 修改
      dialogFormVisible2: false,
      form2: {
        subjectNo: '',
        subjectName: '',
        registerMoney: '',
      },
    };
  },
  computed: {
    maxPage() {
      return Math.ceil(this.count / this.pagesize);
    },
  },
  methods: {
    ...mapActions(['tongyong']),
    changePage(val) {
      this.nowpage = val;
      if (this.search) {
        this.kemuSearch();
      } else {
        this.getData();
      }
    },
    //渲染数据
    getData() {
      // this.$axios({
      // url: URL + "/zsdx-outpatient-service/menzhen/subject/select/selectAll",
      // method: "post",
      // data: { page: this.nowpage, pageSize: this.pagesize },
      // }).then((data) => {
      // console.log(data.data.data);
      // if (data.data.code == 200) {
      // this.count = data.data.count;
      // this.tableData = data.data.data;
      // }
      // });
      this['tongyong']({
        name: 'KEMU_XUANRAN',
        data: { page: this.nowpage, pageSize: this.pagesize },
      }).then(data => {
        console.log(data.data.data);
        if (data.data.code == 200) {
          this.count = data.data.count;
          this.tableData = data.data.data;
        }
      });
    },
    // 添加
    add() {
      console.log(this.form1);
    },
    // 确定添加
    addqued() {
      console.log(this.form1);
      // this.$axios({
      // url: URL + "/zsdx-outpatient-service/menzhen/subject/add/addNew",
      // method: "post",
      // data: this.form1,
      // }).then((res) => {
      // console.log(res);
      // this.getData();
      // });
      this['tongyong']({
        name: 'KEMU_TIANJIA',
        data: this.form1,
      }).then(res => {
        console.log(res);
        this.getData();
      });
    },
    // 修改
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible2 = true;
      this.form2 = {
        subjectNo: row.subjectNo,
        subjectName: row.subjectName,
        registerMoney: row.registerMoney,
      };
    },
    //确定修改,
    editqued() {
      console.log(this.form2);
      // this.$axios({
      // url: URL + "/zsdx-outpatient-service/menzhen/subject/update/update",
      // method: "post",
      // data: this.form2,
      // }).then((data) => {
      // console.log(data.data.msg);
      // this.getData();
      // });
      this['tongyong']({
        name: 'KEMU_XIUGAI',
        data: this.form2,
      }).then(data => {
        console.log(data.data.msg);
        this.getData();
      });
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row.subjectNo);
      // delFn(
      // {
      // url:
      // URL +
      // "//zsdx-outpatient-service/menzhen/subject/delete/" +
      // row.subjectNo,
      // method: "post",
      // params: { id: row.subjectNo },
      // },
      // this
      // ).then((msg) => {
      // console.log(msg);
      // this.getData();
      // });
      this['tongyong']({
        name: 'KEMU_SHANCHU',
        data: { id: row.subjectNo },
      }).then(data => {
        console.log(data);
        this.getData();
      });
    },
    //查询 表格还未变化
    kemuSearch() {
      // this.$axios({
      // url:
      // URL + "/zsdx-outpatient-service/menzhen/subject/select/selectByName",
      // method: "post",
      // data: {
      // subjectName: this.search,
      // page: this.nowpage,
      // pageSize: this.pagesize,
      // },
      // }).then((data) => {
      // this.tableData = data.data.data;
      // this.count = data.data.count;
      // });
      this['tongyong']({
        name: 'KEMU_SEARCH',
        data: {
          subjectName: this.search,
          page: this.nowpage,
          pageSize: this.pagesize,
        },
      }).then(data => {
        this.tableData = data.data.data;
        this.count = data.data.count;
      });
    },
  },
  created() {
    this.getData({
      nowpage: this.nowpage, //当前页
      pagesize: this.pagesize, //一页显示多少条数据
    });
    this.kemuSearch({
      nowpage: this.nowpage,
      pagesize: this.pagesize,
    });
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  text-align: center;
}
.el-input {
  width: 90%;
}
</style>
